﻿<#import "../../_layout.ftl" as layout>
${Html.s("pagetitle","流程详情")}
<@layout._layout>
<script src="/content/gojs/1.8.13/go-debug.js"></script>
<style>
.main{
	margin:5px;
}
</style>

<div class="head">
    <div id="title" class="title">
        流程详情 
    </div>
</div>
<div class="main">
    <ul class="mydetail">  
       <li>
            <label>任务流程信息</label>
            <div style="text-align:left;width: 98%;">
                <table id="tb-info" class="mytable mleft flowinfo"  width="100%">
                    <tbody>
                        <tr>
                            <td>当前节点:</td><td><span id="taskFlowApproveNode"></span></td>
                            <td>当前审批人:</td><td><span id="taskFlowApproveBy"></span></td>
                            <td>任务状态:</td><td><span id="taskTaskState"></span></td>
                            <td>任务更新时间:</td><td><span id="taskUpdateTime"></span></td>
                        </tr>
                        <tr>
                            <td>流程节点:</td><td><span id="flowApproveNode"></span></td>
                            <td>流程发起人:</td><td><span id="flowCreateBy"></span></td>
                            <td>流程状态:</td><td><span id="flowFlowState"></span></td>
                            <td>流程创建时间:</td><td><span id="flowCreateTime"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>   
        <li>
            <label>审批内容:</label> <input type="hidden" id="hdvariables"/>
            <iframe id="content" style="border:1px solid #ccc;width:98%;padding-bottom:10px;" scrolling="no" noresize="false"></iframe>
         </li>        
        <li>
            <label>审批记录</label>
            <table id="tb-nodes" class="mytable" width="98%">
                <tr>
                    <th style="width:5%">审批节点</th>
                    <th style="width:10%">审批人</th>
                    <th style="width:10%">审批结果</th>
                    <th style="width:10%">审批备注</th>
                    <th style="width:10%">审批时间</th>
                </tr>              
            </table>
        </li>
        <li>
            <label>审批状态：</label><label id="dvFlowState"></label>
        </li>
        <li>
            <label>审批流程</label>
             <div id="myDiagramDiv" class="mleft" style="width:50%; height: 500px; background-color: #DAE4E4;"></div>
        </li>        
    </ul>
</div>
<script src="/content/js/flow.js"></script>
<script type="text/javascript">
	//获取url中的参数
    function getUrlParam(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
	$(document).ready(function(){
		$.ajax({
			url:"flow_detail",
			type:"POST",
			dataType:"json",
			data:{
				flowid:getUrlParam("flowid")
			},
			success:function(data){
				$("#title").html(data.data.flow.title);
				$("#content").attr("srcdoc",data.data.model.pcForm);
				$("#hdvariables").val(data.data.flow.flowVariableJson);
				if ($("#content").attachEvent) {    
            		$("#content").attachEvent("onload", function() {   
            			fillFormContent(data.data.flow.flowVariableJson); 
                	});    
       			} else {    
            		$("#content").onload = function() {    
                     	fillFormContent(data.data.flow.flowVariableJson); 
            		};    
      			} 				
				showHistory(data.data.approvelogs);
				showFlow(data.data.flow);
				showTask(data.data.task);
				showDraw(data.data);
			},
			error:function(){
			}			
		});
	});
	function fillFormContent(list)
	{
		if(list!=null&&list!='undefined'){
			var variables=JSON.parse(list);
			while(variables.length>0){
				var variable=variables.pop();	
				if($("#content").contents().find("#"+variable.key))
				{
					$("#content").contents().find("#"+variable.key).val(variable.value);
					//$("#"+variable.key,window.frames["content"].document).val();
				}
			}
		}
	}
	function showHistory(list)
	{
		//$("#tb-nodes").empty();
		while(list.length>0){
			var flowlog=list.pop();
			$("#tb-nodes").append("<tr><td>"+ flowlog.node+"</td><td>"+ flowlog.userBy+"</td><td>"+ flowlog.result+"</td><td>"+ flowlog.remark+"</td><td>"+ flowlog.updateTime+"</td></tr>");
			
		}
	}
	function showTask(task)
	{	if(task){
			$("#taskFlowApproveNode").html(task.flowApproveNode);
			$("#taskFlowApproveBy").html(task.flowApproveBy+"("+task.flowApproveUserno+")");
			var state=""
			if(task.taskState==1) {
				state="处理中";			
			} else if(task.taskState==2) {
				state="已关闭";		
			}else if(task.taskState==3) {
				state="已完成";		
			}
			$("#taskTaskState").html(state);
			$("#taskUpdateTime").html(task.updateTime);
		}
	}
	function showFlow(flow)
	{
		$("#flowApproveNode").html(flow.approveNode);
		$("#flowCreateBy").html(flow.createBy+"("+flow.createUserno+")");		
		var state="";
		if(flow.flowState==1) {
			state="未提交";			
		} else if(flow.flowState==2) {
			state="处理中";		
		}else if(flow.flowState==3) {
			state="已完成";		
		}else if(flow.flowState==4) {
			state="已完毕";		
		}else if(flow.flowState==5) {
			state="异常，请联系管理员";	
		}
		$("#flowFlowState").html(state);
		$("#dvFlowState").html(state);
		$("#flowCreateTime").html(flow.createTime);
		
		fillFormContent(flow.flowVariableJson);
	}
	
	function showDraw(data)
	{
	    var model = paint(go.GraphLinksModel);	 
	    model.nodeDataArray =JSON.parse(data.parintNodes);	  
	    model.linkDataArray =JSON.parse(data.parintLinks);
	    myDiagram.model = model;
	}
	function show_detail(){
		fillFormContent($("#hdvariables").val());
	}

</script>
</@layout._layout>